<template>
	<div>
		<cl-crud @load="onLoad">
			<template #slot-delete="{scope}">
				<delBtn @del="crud.delete(scope.row)"></delBtn>
			</template>
			<template #table-column-app="{scope}">
				{{ filterplatForm(scope.row.app) }}
			</template>
			<template #table-column-status="{scope}">
				<span v-if="scope.row.status == 1" style="color:#22DE48">启用</span>
				<span v-if="scope.row.status == 0" style="color:#A2A4BA">关闭</span>
			</template>
			<template #slot-select-app>
				<div class="appNav">
					<span class="t">数据平台</span>
					<el-select
						class="select"
						size="small"
						@change="filterChange"
						v-model="appvalue"
						placeholder="请选择"
					>
						<el-option label="全部" value=""> </el-option>
						<el-option
							v-for="item in platformList"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						>
						</el-option>
					</el-select>
				</div>
			</template>
			<template #table-column-withdrawData="{scope}">
				<div>
					<p>每天最多可提现{{ scope.row.dayNumber }}次</p>
					<p>每次最少需提现{{ scope.row.amountMin }}元</p>
					<p>每次最多可提现{{ scope.row.amountMax }}元</p>
					<p>每月最高可提现{{ scope.row.monthNumber }}次</p>
					<p>每月最多可提现{{ scope.row.monthAmount }}元</p>
					<p>每月免费提现次数 {{ scope.row.noFreeNumber }}次</p>
					<p>超过免费提现次数后，每次扣除手续费 {{ scope.row.feeRate }}%</p>
				</div>
			</template>
			<template #slot-free>
				<div class="risk-title">
					每月免费提现次数<el-input-number
						v-model="noFreeNumber"
						controls-position="right"
						:min="0"
						size="mini"
					></el-input-number>
					次，超过免费提现次数后，每次扣除手续费
					<el-input-number
						v-model="feeRate"
						controls-position="right"
						:min="0"
						size="mini"
						:precision="2"
						:step="0.1"
					></el-input-number>
				</div>
			</template>
		</cl-crud>

		<cl-form ref="cl-form"></cl-form>
	</div>
</template>

<script>
import delBtn from '@/components/common/del-btn';
import { mapGetters } from 'vuex';

export default {
	data() {
		return {
			crud: null,
			options: [],
			noFreeNumber: 30,
			feeRate: 0,
			appvalue: ''
		};
	},
	components: {
		delBtn
	},
	computed: {
		...mapGetters(['platformList']),
		filterplatForm() {
			return function(val) {
				return this.platformList.length == 0
					? val
					: this.platformList.filter(v => v.value == val)[0].label;
			};
		}
	},
	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;

			ctx.service(this.$service.systemMenagement.withdrawSetting)
				.set('dict', {
					label: {
						add: '添加提现设置'
					}
				})
				.set('table', {
					columns: [
						{
							type: 'selection',
							align: 'center',
							width: 60
						},
						{
							label: '序号',
							type: 'index',
							align: 'center',
							width: 60
						},
						{
							label: '数据平台',
							prop: 'app',
							align: 'center'
						},
						{
							label: '提现参数',
							prop: 'withdrawData',
							align: 'center',
							width: 400
						},
						{
							label: '状态',
							prop: 'status',
							align: 'center'
						},
						{
							label: '创建时间',
							prop: 'createTime',
							align: 'center',
							sortable: true
						}
					],

					op: {
						layout: ['edit', 'slot-delete']
					}
				})
				.set('upsert', {
					props: {
						width: '700px',
						labelWidth: '150px'
					},
					items: [
						{
							label: '数据平台',
							prop: 'app',
							span: 12,
							component: {
								name: 'el-select',
								props: {
									filterable: true,
									'default-first-option': true,
									clearable: true
								},
								options: this.options
							},
							rules: {
								required: true,
								message: '数据平台'
							}
						},
						{
							props: {
								labelWidth: '60px'
							},
							component: {
								name: 'base-info',
								render() {
									return (
										<p style="color:#999999;margin-bottom:-10px">
											提现次数与金额设置
										</p>
									);
								}
							}
						},
						{
							props: {
								labelWidth: '190px'
							},
							label: '每天最多可提现（次）',
							value: 5,
							span: 13,
							prop: 'dayNumber',
							component: {
								name: 'el-input-number',
								attrs: {
									'controls-position': 'right'
								},
								props: {
									min: 0
								}
							}
						},
						{
							props: {
								labelWidth: '190px'
							},
							label: '每次最少需提现（元）',
							value: 1,
							span: 13,
							prop: 'amountMin',
							component: {
								name: 'el-input-number',
								attrs: {
									'controls-position': 'right'
								},
								props: {
									min: 0
								}
							}
						},
						{
							props: {
								labelWidth: '190px'
							},
							label: '每次最多可提现（元）',
							value: 500,
							span: 13,
							prop: 'amountMax',
							component: {
								name: 'el-input-number',
								attrs: {
									'controls-position': 'right'
								},
								props: {
									min: 0
								}
							}
						},
						{
							props: {
								labelWidth: '190px'
							},
							label: '每月最高可提现（次）',
							value: 30,
							span: 13,
							prop: 'monthNumber',
							component: {
								name: 'el-input-number',
								attrs: {
									'controls-position': 'right'
								},
								props: {
									min: 0
								}
							}
						},
						{
							props: {
								labelWidth: '190px'
							},
							label: '每月最多可提现（元）',
							value: 20000,
							span: 13,
							prop: 'monthAmount',
							component: {
								name: 'el-input-number',
								attrs: {
									'controls-position': 'right'
								},
								props: {
									min: 0
								}
							}
						},
						{
							props: {
								labelWidth: '50px'
							},
							component: {
								name: 'slot-free'
							}
						},
						{
							label: '启动状态',
							prop: 'status',
							component: {
								name: 'el-switch'
							}
						}
					]
				})
				.on('open', async (isEdit, data) => {
					this.crud.setData(
						'upsert.items[prop:app].component.options',
						this.$store.state.topFilter.platList
					);
					this.noFreeNumber = 30;
					this.feeRate = 0;
					if (isEdit) {
						this.noFreeNumber = data.noFreeNumber;
						this.feeRate = data.feeRate;
						this.crud.setForm('status', data.status == 1 ? true : false);
					}
				})
				.on('submit', (isEdit, data, { next }) => {
					if (isEdit) {
						let status = data.status ? '1' : '0';
						let {
							amountMax,
							amountMin,
							app,
							dayNumber,
							monthAmount,
							monthNumber,
							id
						} = data;
						next({
							amountMax,
							amountMin,
							app,
							dayNumber,
							monthAmount,
							monthNumber,
							id,
							status
						});
					} else {
						let status = data.status ? '1' : '0';
						let {
							amountMax,
							amountMin,
							app,
							dayNumber,
							monthAmount,
							monthNumber
						} = data;
						let noFreeNumber = this.noFreeNumber;
						let feeRate = this.feeRate;

						next({
							amountMax,
							amountMin,
							app,
							dayNumber,
							monthAmount,
							monthNumber,
							status,
							feeRate,
							noFreeNumber
						});
					}
				})
				.set('layout', [
					[
						'refresh-btn',
						'add-btn',
						'multi-delete-btn',
						'flex1',
						'slot-select-app',
						'search-key'
					],
					['data-table'],
					['flex1', 'pagination']
				])
				.done();

			app.refresh();
		},
		filterChange(e) {
			this.crud.refresh({
				app: e
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.risk-title {
	.el-input-number--mini {
		width: 90px;
		.el-input__inner {
			padding-right: 30px;
		}
	}
}
.appNav {
	margin-right: 20px;
	font-size: $font14;
	.t {
		margin-right: 10px;
	}
}
</style>
